<template>
  <div class="matrix">
    <el-row>
      <el-form ref="form" :model="form" class="searchLine" label-width="120px">
        <el-form-item label="单位" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-select v-model="form.deptId" placeholder="请选择单位" style="width:230px;">
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场站" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-select v-model="form.deptId" placeholder="场站名称" style="width:230px;">
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方阵编号" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-select v-model="form.deptId" placeholder="场站名称" style="width:230px;">
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="诊断开始日期" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-date-picker
            v-model="form.startTime"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="诊断结束日期" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-date-picker
            v-model="form.endTime"
            type="datet"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-row>
          <el-form-item label="诊断模型" class="searchItem bigItem">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="display: inline-block; margin-right:10px; vertical-align:top;">全选</el-checkbox>
            <el-checkbox-group v-model="form.title" style="display: inline-block;" @change="handleChange">
              <el-checkbox :label="2">光伏热斑识别模型</el-checkbox>
              <el-checkbox :label="3">光伏组件脱落识别模型</el-checkbox>
              <el-checkbox :label="4">光伏围栏倾侧识别模型</el-checkbox>
            </el-checkbox-group>
            <el-button type="primary" icon="el-icon-search" @click="listSearch" style="float:right;">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>
    <div class="lineBar">
      <div class="line" ref="line"></div>
      <div class="bar" ref="bar"></div>
    </div>
    <el-row>
      <div class="title">
        数据详情表
        <span>
          下载表格
        </span>
      </div>
      <el-table
       :data="tableData"
       tooltip-effect="dark"
       style="width: 100%">
       <el-table-column
         label="序号"
         type="index"
         width="60"
         >
       </el-table-column>
       <el-table-column
         label="场站名称"
         >
         <template slot-scope="scope">
           <span>
           </span>
         </template>
       </el-table-column>
       <el-table-column
         prop="stationName"
         label="方阵编号">
       </el-table-column>
       <el-table-column
         prop="stationAddress"
         label="诊断时间范围">
       </el-table-column>
       <el-table-column
         prop="stationAdminName"
         label="诊断模型">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="缺陷次数">
       </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "matrix",
    data () {
      return {
        form: {
          title: []
        },
        tree: [],
        checkAll: '',
        isIndeterminate: true,
        selection: [],
        pageSize: 100,
        currentPage: 1,
        total: 0,
        tableData: []
      }
    },
    mounted() {
      let myChart = echarts.init(this.$refs.line)
      let myChart1 = echarts.init(this.$refs.bar)
      window.onresize = myChart.resize
      window.onresize = myChart1.resize
      myChart.setOption(this.initLine())
      myChart1.setOption(this.initBar())
    },
    methods: {
      initBar() {
        let option = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        return option
      },
      initLine() {
        let option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        }
        return option
      },
      handleCheckAllChange(val) {
        this.form.title = val ? [2, 3, 4] : []
        this.isIndeterminate = false
      },
      handleChange(value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === 3
        this.isIndeterminate = checkedCount > 0 && checkedCount < 3
      },
      listSearch() {},
      deleteStation() {},
      handleSelectionChange(selection) {
        this.selection = selection
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.currentPage = currentPage
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
      }
    }
  }
</script>

<style lang="scss" scoped>
  .matrix{
    .searchLine{
      margin-bottom: 10px;
      .searchItem{
        display: inline-block;
        width: 350px;
        vertical-align: top;
      }
      .bigItem{
        width: 100%;
      }
    }
    .pagination{
      text-align: center;
      margin-top: 20px;
    }
    .lineBar{
      width: 100%;
      display:flex;
      flex-wrap: nowrap;
      .line {
        flex: 4.8;
        height: 250px;
        margin-right: 4%;
      }
      .bar {
        flex:4.8;
        height: 250px;
      }
    }
    .title{
      font-size: 18px;
      color:#fff;
      margin: 20px 0;
      span{
        cursor: pointer;
        color:#38E5FF;
        font-size: 14px;
        margin-left: 20px;
      }
    }
  }
</style>
